<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Home</title>
		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="font/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="style/reset.css" />
    <link rel="stylesheet" type="text/css" href="style/home.css" />
    <link rel="stylesheet" type="text/css" href="style/common.css"/>
	</head>
	<body>
		<div class="box">
      <!-- 头部搜索框 -->
			<header>
				<div class="header">
					<div class="search">
						<div class="iconfont icon-sousuo suo"></div>
						<input type="search" placeholder="搜索内容" />
						<div class="clear"></div>
					</div>
				</div>
      </header>
      <!-- 菜单 -->
			<section class="menu">
        <ul>
          <li>
            <a href=""><img src="images/home_icon01.png" alt=""></a>
            <p>美食</p>
          </li>
          <li>
            <a href=""><img src="images/home_icon02.png" alt=""></a>
            <p>甜点</p>
          </li>
          <li>
            <a href=""><img src="images/home_icon03.png" alt=""></a>
            <p>牛奶</p>
          </li>
          <li>
            <a href=""><img src="images/home_icon04.png" alt=""></a>
            <p>蔬菜</p>
          </li>
          <li>
            <a href=""><img src="images/home_icon05.png" alt=""></a>
            <p>茶</p>
          </li>
          <li>
            <a href=""><img src="images/home_icon06.png" alt=""></a>
            <p>快餐</p>
          </li>
          <li>
            <a href=""><img src="images/home_icon07.png" alt=""></a>
            <p>饮料</p>
          </li>
          <li>
            <a href=""><img src="images/home_icon08.png" alt=""></a>
            <p>海鲜</p>
          </li>
        </ul>
      </section>
      <!-- 美食内容 -->
      <section class="content">
        <img src="images/home_content01.png" alt="">
        <div class="txtmore">
          <p>美食</p>
          <a href="">更多&gt;&gt;</a>
        </div>
        <ul>
          <li>
            <a href=""><img src="images/home_content02.png" alt=""></a>
            <p class="title">美味蔬果拼盘</p>
            <p class="price">￥288</p>
            <p class="num">3524人已买</p>
          </li>
          <li>
            <a href=""><img src="images/home_content03.png" alt=""></a>
            <p class="title">部队火锅双人餐</p>
            <p class="price">￥288</p>
            <p class="num">3524人已买</p>
          </li>
          <li>
            <a href=""><img src="images/home_content02.png" alt=""></a>
            <p class="title">美味蔬果拼盘</p>
            <p class="price">￥288</p>
            <p class="num">3524人已买</p>
          </li>
          <li>
            <a href=""><img src="images/home_content03.png" alt=""></a>
            <p class="title">部队火锅双人餐</p>
            <p class="price">￥288</p>
            <p class="num">3524人已买</p>
          </li>
        </ul>
      </section>
      <!-- 底部导航 -->
			<nav>
				<div class="nav">
					<ul>
						<li>
							<a href="">
								<img src="images/nav_11.png" >
								主页
							</a>
						</li>
						<li>
							<a href="">
								<img src="images/nav_2.png" >
								店铺
							</a>
						</li>
						<li>
							<a href="">
								<img src="images/nav_3.png" >
								订单
							</a>
						</li>
						<li>
							<a href="">
								<img src="images/nav_4.png" >
								我的
							</a>
						</li>
					</ul>
				</div>
			</nav>
		</div>
	</body>
</html>
